import React,{useEffect} from 'react'
import * as action from "../action"
import {useDispatch,useSelector} from "react-redux"
import { ProductCard } from 'react-vant';
import { Empty } from 'react-vant';
import {useNavigate} from "react-router-dom"
// 写redux要三步走
function ShopHome() {
   let navigate = useNavigate()
   let dispatch = useDispatch()
  let store = useSelector((state)=>{
        return {
            ...state.shopreducer
        }
  })
  useEffect(()=>{
      // 三步走第一步 调用action里的方法
      // 三步走第二部 去 action中写这个方法
      // 写对应的reducer
      dispatch(action.getlist())
  },[])
  let goDetail = (id)=>{
    navigate("/detail/" + id)
  }
  return (
    <div>
        {
            store.arr && store.arr.length ? store.arr.map((item,index)=>{
                return  <ProductCard
                key={index}
                num={item.num}
                price={item.price}
                desc={item.des}
                title={item.tit}
                thumb={item.img}
                onClick={()=>goDetail(item.id)}
              />
            }):<Empty description="暂无数据" />
        }
    </div>
  )
}

export default ShopHome